<template>
    我的地址
    <el-container class="layout-container-demo">
      <el-main>
        <el-scrollbar>
          <el-radio-group v-model="chooseAddressId">
            <el-table :data="tableData">
              <el-table-column prop="id" label="id" />
              <el-table-column prop="name" label="名称" />
              <el-table-column prop="provinceId" label="省id" />
              <el-table-column prop="cityId" label="市id" />
              <el-table-column prop="districtId" label="区id" />
              <el-table-column prop="position" label="位置" />
              <el-table-column prop="phoneNumber" label="手机号" />
              <el-table-column prop="userId" label="用户id" />
              <el-table-column label="操作" width="160">
                <template #default="scope">
                  <div v-if="attribute === 'buy'">
                    <el-radio :label="scope.row.id" size="large" border>选择</el-radio>
                  </div>
                  <div v-if="attribute === 'edit'">
                    <el-button @click="openAddressDialog(scope.row.id)">编辑</el-button>
                    <el-button @click="deleteAddress(scope.row.id)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-radio-group>
        </el-scrollbar>
      </el-main>
    </el-container>
    <el-button @click="openOrderDialog" v-if="attribute === 'buy'">去下单</el-button>
    <el-button @click="openAddressDialog" v-if="attribute === 'edit'">增加新地址</el-button>

    <order-create ref="orderCreateRef" :chooseAddressId="chooseAddressId" />
    <address-c-u ref="addressCURef" />
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { getAddressByJwt, deleteAddressByIdAndJwt } from "../../api/address/"
import { ElContainer, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
import addressCU from './AddressCU.vue'
import orderCreate from './OrderCreate.vue'

// 选择下单使用的地址
const chooseAddressId = ref(0)

// 当前环境决定显示什么按钮
let attribute = ref("buy")
if (router.currentRoute.value.query.attribute) {
  attribute.value = router.currentRoute.value.query.attribute;
}



// 打开创建地址页面
let addressCURef = ref()
const openAddressDialog = (address: number) => {
  //子组件方法
  addressCURef.value.openDialog(address);
}

// 打开创建订单页面
let orderCreateRef = ref()
const openOrderDialog = () => {
  //子组件方法
  orderCreateRef.value.openDialog();
}

// 获取我的地址
const address = getAddressByJwt({})
let tableData = ref([])
address.then((res) => {
  if (res.code === 200) {
    tableData.value = res.data
  } else {
    return ElMessage({
      showClose: true,
      message: '请重新登录',
      type: 'error',
    })
  }
})


// 删除指定地址
const deleteAddress = (id: number) => {
  alert("delete")
  const addressDeleteResult = deleteAddressByIdAndJwt({ id: id })
  addressDeleteResult.then((res) => {
    if (res.code === 200) { } else {
      return ElMessage({
        showClose: true,
        message: '删除失败,' + res.message,
        type: 'error',
      })
    }
  })
}
</script>
  
<style scoped lang="scss">
.layout-container-demo {
  padding: 0 0;

  .el-main {
    padding: 0 0;

    .el-radio-group {
      width: 100%;
    }
  }
}
</style>
  